import './index.scss'
import {View} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useContext, useEffect} from 'react'
import Taro, {useDidHide, useDidShow, useRouter} from '@tarojs/taro'
import {disShareDevStore} from './model'

const Dissharedev = () => {
  let router = useRouter()
  const {
    updatePageQuery,
    pageQuery,
    detailData,
    updateDetailData,
    disShareDev
  } = useContext(disShareDevStore)

  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Dissharedev useEffect')
  })
  // 对应 onShow
  useDidShow(() => {
    console.log('Dissharedev useDidShow')
    updatePageQuery(router.params)
    updateDetailData()
  })
  // 对应 onHide
  useDidHide(() => {
    console.log('Dissharedev useDidHide')
  })
  return (
    <View className="w-screen h-screen pb-30 flex flex-col overflow-hidden">
      <View className="w-full flex items-center px-16 mt-24 mb-12">
        <View className="hanzi text-16 font-medium">{pageQuery.devName}</View>
      </View>

      <View className="w-full h-20 px-16 mb-24 flex items-center">
        <View className="hanzi text-14 text-xx_text truncate">{`共分享设备${
          detailData.shareCount || 0
        }次`}</View>
      </View>

      <View className="w-full px-16 mb-32">
        <View className="hanzi text-12 text-x_text mb-10">
          已将本设备分享给：{pageQuery.shareUserName}
        </View>
        <View className="hanzi text-12 text-x_text mb-10">
          分享时间为：{pageQuery.shareTime}
        </View>
      </View>

      <View
        className="h-48 leading-48 mx-16 rounded-6 text-16 bg-white text-danger text-center text-medium border-1 border-solid border-danger"
        onClick={() => disShareDev()}
      >
        解除分享
      </View>
    </View>
  )
}
export default observer(Dissharedev)
